---
title: 'Litos: Readme Page Config'
description: 'Configure Readme page modules (site, header/footer links, social, GitHub, skills) with field docs and examples.'
pubDate: 2025-08-14
author: 'Dnzzk2'
cover: assets/cover.png
recommend: true
tags: ['Litos', 'Documentation']
---

The following files are compatible with this document:

- `src/pages/index.astro` - readme page.
- `src/config.ts` - readme page config.
- `src/components/base` - most of the components come from here.

### Site Config

Configure basic site information:

```ts title="config.ts"
export const SITE: Site = {
  title: 'Litos',
  description: 'Litos is a blog theme built with Astro.js and Dnzzk2.',
  website: 'https://litos.vercel.app/',
  lang: 'en',
  base: '/',
  author: 'Dnzzk2',
  ogImage: '/og-image.jpg',
}
```

| Property    | Description                                                                                                                                                                                                             |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| title       | The title of the site.                                                                                                                                                                                                  |
| description | The description of the site.                                                                                                                                                                                            |
| website     | Your final, deployed URL. Astro uses this full URL to generate your sitemap and canonical URLs in your final build. It is strongly recommended that you set this configuration to get the most out of Astro.            |
| lang        | The lang global attribute helps define the language of an element.                                                                                                                                                      |
| base        | The base path to deploy to. Astro will use this path as the root for your pages and assets both in development and in production build. <br /> When you set it to `/docs`, astro dev will start your server at `/docs`. |
| author      | The author of the site.                                                                                                                                                                                                 |
| ogImage     | The Open Graph images of the site, but on the specific post page, you can use other ogImage instead.                                                                                                                    |

### Header Links

Top jump link component configuration:

```ts title="config.ts"
export const HEADER_LINKS: Link[] = [
  {
    name: 'Posts',
    url: '/posts',
  },
]
```

### Footer Links

Footer link component configuration:

```ts
export const FOOTER_LINKS: Link[] = [
  {
    name: 'Readme',
    url: '/',
  },
]
```

### Social Links

In the readme page, you can see a string of icons below the theme introduction, which can be configured below. Icons are from :link[Iconify]{id=https://icon-sets.iconify.design/}.

```ts title="config.ts"
export const SOCIAL_LINKS: SocialLink[] = [
  {
    name: 'github',
    url: 'https://github.com/yourname',
    icon: 'icon-[ri--github-fill]',
    count: 11,
  },
  {
    name: 'twitter',
    url: 'https://x.com/yourname',
    icon: 'icon-[ri--twitter-x-fill]',
  },
]
```

| Property | Description                                                                     |
| -------- | ------------------------------------------------------------------------------- |
| name     | The name of the social link.                                                    |
| url      | The URL of the social link.                                                     |
| icon     | The icon of the social link.                                                    |
| count    | The number of followers of this social media link. This is an `optional` field. |

### Spotlight

```ts title="config.ts"
export const GITHUB_CONFIG: GithubConfig = {
  ENABLED: true,
  GITHUB_USERNAME: 'Dnzzk2',
  TOOLTIP_ENABLED: true,
}
```

| Property        | Description                                                        |
| --------------- | ------------------------------------------------------------------ |
| ENABLED         | Whether to enable GitHub features.                                 |
| GITHUB_USERNAME | The GitHub username to fetch data.                                 |
| TOOLTIP_ENABLED | Whether to enable Github Tooltip (the cursor hover card) features. |

### Skills

On the readme page, you can see a skill display area where you can showcase your skills by configuring the following code:

```ts title="config.ts"
export const SKILLSSHOWCASE_CONFIG: SkillsShowcaseConfig = {
  SKILLS_ENABLED: true,
  SKILLS_DATA: [
    {
      direction: 'left',
      skills: [
        {
          name: 'JavaScript',
          icon: 'icon-[mdi--language-javascript]',
        },
        {
          name: 'CSS',
          icon: 'icon-[mdi--language-css3]',
        },
        {
          name: 'HTML',
          icon: 'icon-[mdi--language-html5]',
        },
        {
          name: 'TypeScript',
          icon: 'icon-[mdi--language-typescript]',
        },
      ],
    },
  ],
}
```

| Property                                             | Description                                                                                 |
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| SKILLS_ENABLED                                       | Whether to enable SkillsShowcase features.                                                  |
| SKILLS_DATA                                          | The data of the skills. A single object represents a row.                                   |
| &nbsp;&nbsp;&nbsp;&nbsp;direction                    | Each animation runs in two directions: `left` and `right`.                                  |
| &nbsp;&nbsp;&nbsp;&nbsp;skills                       | The skills array.                                                                           |
| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name | The name of the skill.                                                                      |
| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;icon | The icon of the skill. Icons are from :link[Iconify]{id=https://icon-sets.iconify.design/}. |

> [!TIP]
> It is recommended to run the project locally and check its effectiveness. It is suggested to have at least three different skills per line.

### Posts

Here, we mainly display pinned posts. If there are no pinned posts, we will display the latest number of `size` posts based on `POSTS_CONFIG`.
